<!-- FirstRight -->
<template>
  <!--    <div class="FirstRight card">-->
  <!--        <div v-for="(user, idx) in users" :key="idx">-->
  <!--            <div class="top1" v-if="idx == 0">-->
  <!--                <div style="height: 70px">-->
  <!--                    <img class="avatarImg" :src="user.avatarUrl" alt="" />-->
  <!--                </div>-->
  <!--                <div style="display: block; height: 60px; margin: auto">-->
  <!--                    <div class="user-name">{{ user.name }}</div>-->
  <!--                    <div class="user-desc">{{ user.descs }}</div>-->
  <!--                </div>-->
  <!--            </div>-->
  <!--            <div class="next" v-else>-->
  <!--                <img class="avatarImg" :src="user.avatarUrl" alt="" />-->
  <!--                <div-->
  <!--                    style="-->
  <!--                        display: inline-block;-->
  <!--                        height: 48px;-->
  <!--                        margin-left: 10px;-->
  <!--                        width: calc(100% - 80px);-->
  <!--                    "-->
  <!--                >-->
  <!--                    <div style="float: left">-->
  <!--                        <div class="user-name">{{ user.name }}</div>-->
  <!--                        <div class="user-desc">{{ user.descs }}</div>-->
  <!--                    </div>-->
  <!--                    <div class="time-num">{{ user.minute }}</div>-->
  <!--                </div>-->
  <!--            </div>-->
  <!--        </div>-->
  <!--    </div>-->
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;

export default {
  name: "FirstRight",
  components: {},
  props: [],
  data() {
    //这里存放数据
    return {
      users: [
        {
          id: "",
          name: "Leeson",
          avatarUrl:
              "https://tse3-mm.cn.bing.net/th/id/OIP-C.XpnLCXvNjh1PjkvAr-t6nAAAAA?w=215&h=215&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "诗与远方",
          minute: 300,
        },
        {
          id: "",
          name: "无所谓",
          avatarUrl:
              "https://tse1-mm.cn.bing.net/th/id/OIP-C.g4VMocET-A-JEvZrRMalBgAAAA?w=215&h=215&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "意义",
          minute: 300,
        },
        {
          id: "",
          name: "左盼",
          avatarUrl:
              "https://tse1-mm.cn.bing.net/th/id/OIP-C.7h9wcySsOrfNHTk1wJV2JQAAAA?w=215&h=215&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "每天开心",
          minute: 300,
        },
        {
          id: "",
          name: "小猪佩奇",
          avatarUrl:
              "https://tse4-mm.cn.bing.net/th/id/OIP-C.q7VFtf5fSePQqf5MbJEY5QAAAA?w=199&h=198&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "诗与远方不达标",
          minute: 300,
        },
        {
          id: "",
          name: "再见只是陌生人",
          avatarUrl:
              "https://tse2-mm.cn.bing.net/th/id/OIP-C.yLK1zLu33aujN7QnOMqDwQAAAA?w=198&h=198&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "2048",
          minute: 290,
        },
        {
          id: "",
          name: "读书",
          avatarUrl:
              "https://tse1-mm.cn.bing.net/th/id/OIP-C.UzMtNg2KaGmUlx5uP8XZ_AAAAA?w=198&h=198&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "阅万卷书，行万里路",
          minute: 280,
        },
        {
          id: "",
          name: "悄悄地卷",
          avatarUrl:
              "https://tse3-mm.cn.bing.net/th/id/OIP-C.j1DqlOxg1HOiKCuXJ5LhvgAAAA?w=198&h=198&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "安静地。",
          minute: 180,
        },
        {
          id: "",
          name: "这个表情有点帅",
          avatarUrl:
              "https://tse3-mm.cn.bing.net/th/id/OIP-C.dESxYPLsFhStiSYxbhAo5wAAAA?w=198&h=198&c=7&r=0&o=5&dpr=2&pid=1.7",
          descs: "你发现不了我这里写的啥",
          minute: 168,
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.FirstRight {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  overflow: scroll;
}

.next {
  padding-left: 10px;
}

.avatarImg {
  display: inline-block;
  width: 40px;
  border-radius: 50%;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
}

.user-desc {
  color: #666;
  font-size: 12px;
}

.time-num {
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  float: right;
  color: rgb(243, 151, 151);
}

.top1 {
  text-align: center;
  width: 100%;
  // height: 120px;
  .avatarImg {
    display: block;
    margin: auto;
    width: 70px;
  }

  .user-name {
    font-size: 18px;
    font-weight: 500;
  }

  .user-desc {
    color: #666;
    font-size: 12px;
  }
}
</style>
